<template>
	<view style="padding: 20rpx;">
		<u-sticky>
			<view class="top-panel">
				<view class="top-view-item">
					<view class="top-view-item-value" style="color:#00B9B3">{{topData.gridResidentCount||0}}</view>
					<view class="top-view-item-title">居民总数</view>
				</view>
				<view class="top-view-item">
					<view class="top-view-item-value" style="color:#3979F9">{{topData.gridSpecialCount||0}}</view>
					<view class="top-view-item-title">特殊人员</view>
				</view>
				<view class="top-view-item">
					<view class="top-view-item-value" style="color:#EE9321">{{topData.gridPoorCount||0}}</view>
					<view class="top-view-item-title">特困人群</view>
				</view>
			</view>
		</u-sticky>
		<uni-section title="人员类型分布" padding>
			<view class="height:250px;">
				<qiun-data-charts type="ring" :opts="opts" :chartData="personTypeChartData" />
			</view>
		</uni-section>

		<uni-section title="特困/特殊人群">
			<uni-grid :column="4" :show-border="false" :square="false" :highlight="false">
				<uni-grid-item v-for="(item,index) in specialData"  :key="index">
					<view class="grid-item-box">
						<view class="grid-item-label">
							{{item.name}}
						</view>
						<text class="grid-item-value">{{item.value}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		<uni-section title="任务记录" padding>
			<u-row>
				<view style="height:120px;width: 100%;">
					<qiun-data-charts type="ring" :opts="taskOpts" :chartData="taskChartData" />
				</view>
				<!-- <u-col :span="6">任务总数<text class="task-num">9999</text></u-col>
				<u-col :span="6">已完成任务总数<text class="task-num">9999</text></u-col> -->
			</u-row>
			<view style="margin-top:12px">
				<!-- <view class="task-item">
					<view class="task-item-title"><text>数据核查</text></view>
					<view class="task-item-line"><u-line-progress :percentage="taskItem1Percentage"
							v-if="taskItem1Percentage<=15" activeColor="#0FD9D2" height="30rpx">
							<template slot="default">
								<text class="u-percentage-slot" style="color:#0FD9D2">{{taskItem1Percentage}}%</text>
							</template>

						</u-line-progress>
						<u-line-progress :percentage="taskItem1Percentage" v-else activeColor="#0FD9D2" height="30rpx">
						</u-line-progress>
					</view>
					<view class="task-item-value" style="text-align:right;color:#0FD9D2">
						{{statisticsData.gridEndHouseCount}}/{{statisticsData.gridHouseCount}}
					</view>
				</view> -->
				<view class="task-item">
					<view class="task-item-title"><text>人员走访</text></view>
					<view class="task-item-line"><u-line-progress :percentage="taskItem2Percentage"
							v-if="taskItem2Percentage<=15" activeColor="#5683F6" height="30rpx">
							<template slot="default">
								<text class="u-percentage-slot" style="color:#5683F6">{{taskItem2Percentage}}%</text>
							</template>

						</u-line-progress>
						<u-line-progress :percentage="taskItem2Percentage" v-else activeColor="#5683F6"
							height="30rpx" />
					</view>
					<view class="task-item-value" style="text-align:right;color:#5683F6">
						{{statisticsData.gridEndVisitTaskCount}}/{{statisticsData.gridVisitTaskCount}}
					</view>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import * as StatisticsApi from "@/api/statistics.js"
	export default {
		data() {
			return {
				topData: {},
				personTypeChartData: {},
				specialData: [],
				statisticsData: {},
				taskItem1Percentage: 0,
				taskItem2Percentage: 0,
				taskChartData: {},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					// padding: [0, 0, 0, 0],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "总人数",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "0",
						fontSize: 26,
						color: "#2D2C3C"
					},
					extra: {
						ring: {
							customRadius: 70,
							ringWidth: 20,
							activeOpacity: 0.5,
							activeRadius: 20,
							offsetAngle: 0,
							labelWidth: 5,
							border: false,
							// borderWidth: 3,
							// borderColor: "#FFFFFF"
						},
					},
				},
				taskOpts: {
					rotate: false,
					rotateLock: false,
					padding: [2, 2, 2, 2],
					dataLabel: true,
					legend: {
						show: true,
						position: "left",
						float: 'top',
						margin: -2
						// lineHeight: 25,
					},
					color: ["#73C0DE", "#3CA272"],
					title: {
						name: "1250",
						fontSize: 30,
						fontWeight: 'bold',
						color: "#2D2C3C"
					},
					subtitle: {
						name: "任务总数",
						fontSize: 12,
						color: "#A4A9BF"
					},
					extra: {
						ring: {
							customRadius: 53,
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 15,
							offsetAngle: -60,
							labelWidth: 10,
							border: false,
						},
					},
				},
			};
		},
		methods: {
			getResidentStatisticsData() {
				StatisticsApi.getResidentStatisticsData().then(res => {
					const data = res.data;
					// const {
					// 	appResident,
					// 	appSpecialCount
					// } = data;
					this.topData = {
						gridResidentCount: data.totalPeopleNum, //居民数
						gridSpecialCount: data.specialNum, //特殊人员数
						gridPoorCount: data.poorNum, //特困人群数
					}

					const {peopleData,specialData,poorData}=data;
					//特殊/特困人群统计
					this.specialData = [...poorData,...specialData];

					//人员类型分布统计
					const chart1Data = {
						series: [{
							data: peopleData.map(i=>{
								return {
									name:`${i.name} ${i.value}`,
									value:i.value,
									labelText:data.totalPeopleNum>0?((i.value/data.totalPeopleNum)*100).toFixed(0)+'%':'0%'
								}
							})
						}]
					};
					this.personTypeChartData = JSON.parse(JSON.stringify(chart1Data));
					this.opts.subtitle.name = data.totalPeopleNum + '';

				})
			},
			getTaskStatisticsData() {
				StatisticsApi.getTaskStatisticsData().then(res => {
					const data = res.data.list[0];
					const {
						appHouseCountAnalyseDTO,
						appVisitTaskCountAnalyseDTO
					} = data;
					const statisticsData={
						...appHouseCountAnalyseDTO,
						...appVisitTaskCountAnalyseDTO
					}
				
					this.statisticsData=statisticsData
					this.taskItem1Percentage = ((statisticsData.gridEndHouseCount / statisticsData
						.gridHouseCount) * 100).toFixed(1)
					this.taskItem2Percentage = ((statisticsData.gridEndVisitTaskCount /
						statisticsData.gridVisitTaskCount) * 100).toFixed(1)
					//任务记录统计
					const chart2Data = {
						series: [{
							data: [{
									name: `任务完成总数 ${statisticsData.gridEndVisitTaskCount}`,
									color: "#2fc25b",
									value: statisticsData.gridEndVisitTaskCount,
									labelText:statisticsData.gridVisitTaskCount>0?((statisticsData.gridEndVisitTaskCount/statisticsData.gridVisitTaskCount)*100).toFixed(1)+'%':'0%',
								},
								{
									name: `任务总数 ${statisticsData.gridVisitTaskCount}`,
									value: statisticsData.gridVisitTaskCount,
									color: "#73C0DE",
									labelShow: false
								}
							]
						}]
					};
					this.taskChartData = JSON.parse(JSON.stringify(chart2Data));
					this.taskOpts.title.name = statisticsData.gridVisitTaskCount>0?statisticsData.gridVisitTaskCount: '0'
				})
			},
		},
		onLoad() {
			this.getResidentStatisticsData();
			this.getTaskStatisticsData()
		}
	}
</script>

<style lang="scss">
	.top-panel {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px 10px;
	}

	.top-view-item {
		width: 216rpx;
		height: 120rpx;
		line-height: 120rpx;
		padding: 12rpx 0rpx;
		text-align: center;
		border-radius: 8rpx;
		opacity: 1;
		background: #FFFFFF;

		.top-view-item-value {
			font-family: D-DIN;
			font-size: 48rpx;
			font-weight: bold;
			line-height: normal;
			letter-spacing: 0em;
			font-variation-settings: "opsz" auto;
			font-feature-settings: "kern" on;
		}

		.top-view-item-title {
			font-family: Source Han Sans;
			font-size: 25rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: 0em;

			font-variation-settings: "opsz" auto;
			font-feature-settings: "kern" on;
			color: #9E9E9E;
		}


	}

	::v-deep .uni-section {
		border: 1.6rpx solid #EBEEF5;
		border-radius: 8rpx;
		margin: 20rpx 0;
	}

	::v-deep .uni-section-content {
		padding: 0 20rpx !important
	}

	.u-percentage-slot {
		padding: 1px 5px;
		// background-color: $u-warning;
		// border-radius: 100px;
		font-size: 18rpx;
		margin-right: -100px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 26rpx 0;

		.grid-item-label {
			position: relative;
			font-family: Source Han Sans;
			font-size: 24rpx;
			font-weight: normal;
			line-height: normal;
			font-variation-settings: "opsz" auto;
			font-feature-settings: "kern" on;
			color: #414046;
		}

		.grid-item-label::before {
			content: "";
			display: block;
			width: 12rpx;
			height: 12rpx;
			background-color: #90B5FF;
			position: absolute;
			left: -20rpx;
			top: 12rpx;
			border-radius: 50%;
		}

		.grid-item-value {
			font-family: D-DIN;
			font-size: 16px;
			font-weight: bold;
			line-height: normal;
			font-variation-settings: "opsz" auto;
			font-feature-settings: "kern" on;
			color: #3979F9;
		}
	}

	.task-num {
		margin-left: 8rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.task-item {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;

		.task-item-title {
			width: 20%;
		}

		.task-item-line {
			width: 65%;
			padding: 16rpx 0
		}

		.task-item-value {
			width: 15%
		}
	}
</style>
